// React基础组件
import React from "react";
// dva 连接组件 - 连接route和model
import { connect } from "dva";
// 引入antd的组件
import {
  Form,
  Popconfirm,
  Upload,
  message,
  Button,
  Modal,
  Row,
  Col,
  Input,
  Divider,
  Icon,
  Select,
  Radio,
  DatePicker,
  Tooltip
} from "antd";
//导入路由组件，用于跳转等
import { Link, hashHistory } from "dva/router";
// 导入项目全局配置文件
import config from "config/config";

// 引入model取值工具方法
import { mapStateToProps } from "utils/view_utils";
import { reqInform } from "utils/notification";
// 当前组件样式
import styles from "./giftReceiveInfoStyle.less";
import Uploader from "../../../../widget/Upload";
import ListPage from "widget/PageTmpl/ListPage";
import classnames from "classnames/bind";
let cx = classnames.bind(styles);
const Option = Select.Option;
const InputGroup = Input.Group;
const confirm = Modal.confirm;
const { TextArea } = Input;
import $ from "jquery";
import Cookie from "js-cookie";
import { download } from "utils/util";
import { CollapsiblePanels } from "widget/CollapsiblePanels/index";
//权限管理
import FlagBtn from "widget/FlagBtn/FlagView";
import moment from "moment";

const FormItem = Form.Item;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const { RangePicker } = DatePicker;

const giftReceiveInfoView = function({ dispatch, model, form }) {
  // 取出model对象，命名空间
  const { modelObj, namespace } = model;
  // modelObj.xxx获取model中状态机的值
  let { giftInfoDetail,biz} = modelObj;
  let accountId = JSON.parse(localStorage.getItem('navBar')).accountId || ""
  // debugger
  const formItemLayout4 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  };

    // 分页表格属性配置
    let pageProps = {
      // ---------- 界面部分 ----------
      'ui': {
        // 页面接口地址
        'api_url': 'admin/product/present/applyList',
        // "api_url": "admin/housetype/list",
        // 接口方式
        'method': 'POST',
        'app': 'isales-mgmt-application',
        // 接口参数
        'params': `productId=${giftInfoDetail.productId}&&accountId=${accountId}`,
        // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
        // "mockData": mockData,
        'mockData': null,
        // 查询栏
        'search_bar': {
          'fields': [
            {
              en_name: 'name',
              zh_name: '客户姓名',
              elem_type: 'Input',
              elem_valid_type: 'string',
            },
            {
              en_name: 'mobile',
              zh_name: '客户手机号',
              elem_type: 'Input',
              elem_valid_type: 'string',
            },
            {
              en_name: 'status',
              zh_name: '领取状态',
              elem_type: 'Select',
              elem_valid_type: 'string',
              cmpt_items: [
                { value: 1, label: '已领取' },
                { value: 2, label: '已发货' },
                { value: 3, label: '已确认' },
                { value: 9, label: '已取消' },
              ],
            },
            {
                en_name: 'validTime',
                zh_name: '线上申领日期',
                elem_type: 'Date',
                format: 'YYYY-MM-DD',
                // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
                // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
                split_keys: ['startOnlineTime', 'endOnlineTime'],
                elem_valid_type: 'string'
            },
            {
              en_name: 'receiveWay',
              zh_name: '领取方式',
              elem_type: 'Select',
              elem_valid_type: 'string',
              cmpt_items: [
                {value:0,label:'形式不限'},
                {value:1,label:'现场领取'},
                {value:2,label:'快递邮寄'}
              ],
            }
          ],
          searchHandler: (p) => { // 自定义搜索按钮回调函数，点击搜索时触发
            console.log('search click', p)
          },
          resetHandler: (p) => { // 自定义重置按钮回调函数，点击重置时触发
            console.log('reset click', p)
          },
          searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
            console.log('search finish', params)
          },
          pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
            'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
          ]
        },
        // 数据表格
        'table': {
          'status_params': 'status=0',
          'status_text': '全部',
          'scroll': { x: 2000 },
          'action_props': { width: 200 },
          // 表头字段列表"
          'fields': [
            // {
            //   en_name: "key",
            //   zh_name: "序号",
            //   width: 60,
            //   render: (a, item, index, d, e, f) => {
            //     return index + 1
            //   },
            // },
            {
              'en_name': 'regionName',
              'zh_name': '区域',
              width: 200
            },
            {
              'en_name': 'projectName',
              'zh_name': '项目名称',
              width: 200
            },
            {
              'en_name': 'nickName',
              'zh_name': '微信昵称',
              width: 200
            },
            {
              'en_name': 'receivePerson',
              'zh_name': '登记姓名',
              width: 100,
            },
            {
              'en_name': 'idCardName',
              'zh_name': '身份证姓名',
              width: 200,
            },
            {
              'en_name': 'receiveMobile',
              'zh_name': '客户手机号',
              width: 200
            },
            {
              'en_name': 'receiveTime',
              'zh_name': '线上申领时间',
              width: 150,
            },
            {
              'en_name': 'receiveCount',
              'zh_name': '申请数量',
              width: 150,
            },
            {
              'en_name': 'receiveWay',
              'zh_name': '领取方式',
              width: 150,
              render: (a, item, index, d, e, f) => {
                let eleNode = undefined
                switch(item.receiveWay){
                  case 0:
                    eleNode = <div>形式不限</div>
                  break;
                  case 1:
                    eleNode = <div>现场领取</div>
                  break;
                  case 2:
                    eleNode = <div>快递邮寄</div>
                  break;
                  default:
                    eleNode = <div>-</div>
                }
                return eleNode
              },
            },
            {
              'en_name': 'confirmStatus',
              'zh_name': '领取状态',
              width: 150,
              render: (a, item, index, d, e, f) => {
                let eleNode = undefined
                switch(item.confirmStatus){
                  case 0:
                    eleNode = <div>未领取</div>
                  break;
                  case 1:
                    eleNode = <div>已领取</div>
                  break;
                  // case 2:
                  //   eleNode = <div>已发货</div>
                  // break;
                  // case 3:
                  //   eleNode = <div>已确认</div>
                  // break;
                  // case 9:
                  //   eleNode = <div>已取消</div>
                  // break;
                  default:
                    eleNode = <div>-</div>
                }
                return eleNode
              },
            },
            {
              'en_name': 'name',
              'zh_name': '收货人',
              width: 100,
            },
            {
              'en_name': 'mobile',
              'zh_name': '收货人电话',
              width: 100,
            },
            {
              'en_name': 'detailAddress',
              'zh_name': '收货人地址',
              render:(a, item, index, d, e, f)=>{
                return <span>{item.cityName} {item.provinceName} {item.countyName} {item.detailAddress}</span>
              },
              width: 400
            },
            {
              'en_name': 'writeOffPerson',
              'zh_name': '核销人账号',
              width: 100,
            },
            {
              'en_name': 'confirmTime',
              'zh_name': '核销时间',
              width: 300,
            },  
          ],
        },
        // 操作栏
        action_bar: [
          {
          label: '导出',
          type: 'primary',
          btnId: '20504',
          onClick: (e, row) => {
            let query = { ...biz.queryForm,productId:giftInfoDetail.productId,accountId:JSON.parse(localStorage.getItem('navBar')).accountId || ""}
            dispatch({
              type: `${namespace}/exportExcel`,
              payload: {query}
            })
          }
        },
        {
          label: '核销',
          type: 'primary',
          btnId: '20504',
          rowSelection:[],
          onClick: (e, row) => {
            if(row.length!=0){
              let params = null
              let arr = []
              row.forEach(item=>{
                console.log(item)
                arr.push(item.presentReceiveRecordId)
              })
              params = {
                presentReceiveRecordIds:arr.toString(),
                confirmPerson:localStorage.getItem('username')
              }
              dispatch({
                type: `${namespace}/batchConfirm`,
                payload: {params}
              })
            }else{
              message.warning('请最少选择一条数据')
            }
          }
        }
      ]
      },
    }
    if (!!modelObj.biz) {
      pageProps.biz = modelObj.biz
      pageProps.biz.syncBackCbf = (biz) => {
        dispatch({
          type: `${namespace}/updateStore`,
          payload: { biz }
        })
      }
    }

    if (!!modelObj.biz) {
      pageProps.biz = modelObj.biz
      pageProps.biz.syncBackCbf = (biz) => {
        biz.tableData.dataSource.map(item=>{
          (item.confirmStatus == 0 || !item.confirmStatus)? item.disabled=false:item.disabled=true
        })
        // console.log(biz.tableData.dataSource)
        dispatch({
          type: `${namespace}/updateStore`,
          payload: { biz }
        })
      }
    }
  return (
    <div className={cx("pageLayout")}>
      <div className="public_listMain">
        <div className="boxShadow">
          <CollapsiblePanels title={"礼品基本信息"} hideUpDownBtn={true}>
            <Row style={{ paddingTop: "10px" }}>
              <Col span={6}>
                <label className={styles.detailTitle}>
                  礼品名称：<span className={styles.detailSpan}>{giftInfoDetail.name}</span>
                </label>
              </Col>
              <Col span={6}>
                <label className={styles.detailTitle}>
                  总库存量:
                  <span className={styles.detailSpan}>{giftInfoDetail.totalStock}</span>
                </label>
              </Col>
              <Col span={6}>
                <label className={styles.detailTitle}>
                  领取数量：
                  <span className={styles.detailSpan}>
                    {giftInfoDetail.useCount}
                  </span>
                </label>
              </Col>
            </Row>
          </CollapsiblePanels>
          <ListPage pageProps={pageProps} />
        </div>
      </div>
    </div>
  );
};

export default connect(mapStateToProps)(Form.create()(giftReceiveInfoView));